Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    - let c;
- c = ['fbf8cc','fde4cf','ffcfd2','f1c0e8','cfbaf0','a3c4f3','90dbf4','8eecf5','98f5e1','b9fbc0'].reverse();
- c = ['ffadad','ffd6a5','fdffb6','caffbf','9bf6ff','a0c4ff','bdb2ff','ffc6ff','fffffc'];
- let n = c.length;
- let d = .8;

svg(width='0' height='0')
	filter#open(color-interpolation-filters='sRGB' 
	            primitiveUnits='objectBoundingBox')
		feColorMatrix(values=`0 0 0 0 .75 
		                      0 0 0 0 .75 
													0 0 0 0 .75 
													0 0 1 0 0` result='base')
		feGaussianBlur(stdDeviation='.005 .02')
		feComponentTransfer(result='rond')
			feFuncA(type='table' tableValues='-2 2')
		feGaussianBlur(stdDeviation='.01 .04')
		feOffset(dx='.01' dy='.04')
		feComposite(in='rond' operator='out' result='insh')
		feFlood(flood-color=`#${c[0]}`)
		feComposite(in2='rond' operator='in')
		feBlend(in='insh' mode='multiply' result=`lyr0`)
		
		feColorMatrix(in='SourceGraphic'
		              values=`1 0 0 0 0 
									        0 1 0 0 0 
													0 0 0 0 0 
													0 0 0 .5 0` result='grad')
		
		- for(let i = 1; i < n; i++)
			feDisplacementMap(in='base' in2='grad' 
			                  scale=(Math.pow(i/n, 2) + .25/n)*d 
												xChannelSelector='R' 
												yChannelSelector='G')
			feGaussianBlur(stdDeviation='.005 .02')
			feComponentTransfer(result=`rnd${i}`)
				feFuncA(type='table' tableValues='-2 2')
			feFlood(flood-color=`#${c[i]}`)
			feComposite(in2=`rnd${i}` operator='in')
			feBlend(in2=`lyr${i - 1}` result=`lyr${i}`)

div play
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

@property --k {
	syntax: '<number>';
	initial-value: 1;
	inherits: true
}

html, body { display: grid }

html { min-height: 100% }

body { background: #ededed }

svg { position: fixed }

div {
	--j: (1 - var(--k));
	--d: (1lh - 1ch);
	--o: calc(.5*var(--d));
	place-self: center;
	overflow: hidden;
	position: relative;
	padding: 0 .5em;
	width: min-content;
	color: #00f;
	font: 700 20vmin/ 1 anton, sans-serif;
	text-indent: .0625em;
	letter-spacing: .125em;
	text-align: center;
	text-transform: uppercase;
	clip-path: inset(2px);
	isolation: isolate;
	filter: url(#open) url(#smooth) url(#texture);
	transition: --k .35s ease-out;
	
	&::after {
		position: absolute;
		inset: 0;
		background: 
			linear-gradient(
					rgb(0%, 50%, 0%), 
					rgb(0%, calc(50%*(1 + var(--j))), 0%)), 
			linear-gradient(
					rgb(50%, 0%, 0%), 
					rgba(50%, 0%, 0%, var(--k))), 
			linear-gradient(90deg, 
					rgb(calc(50%*(1 + var(--j))), 0%, 0%), 
					rgb(calc(50%*(1 - var(--j))), 0%, 0%));
		background-blend-mode: lighten, normal;
		mix-blend-mode: lighten;
		pointer-events: none;
		content: ''
	}
	
	&:hover { --k: 0 }
}

Frontend Forever App